<template>
  <div class="game">
    <el-breadcrumb>
      <el-breadcrumb-item>会员管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/index/memberList' }">会员列表</el-breadcrumb-item>
      <el-breadcrumb-item>分销订单</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="game-content">
      <el-form>
        <el-form-item>
          <div class="selectTime fl">
            <span class="label">下单时间</span>
            <el-date-picker v-model="startEndTime"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="startEndTimeChange">
            </el-date-picker>
          </div>
          <div class="fl"
            style="margin-left:15px;">
            <el-input placeholder="请输入订单号/顾客姓名"
              style="width:200px;"
              v-model="searchKey"
              clearable></el-input>
          </div>
            <div class="fl"
            style="margin-left:15px;">
            <el-input placeholder="请输入酒店名称"
              style="width:200px;"
              v-model="hotelName"
              clearable></el-input>
          </div>
          <el-button type="primary"
            @click="searchMember"
            class="searchGame">
            <i class="el-icon-search"></i>
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-table :data="distributionList"
            max-height="550">
            <el-table-column prop="orderNum"
              label="订单号">
            </el-table-column>
            <el-table-column prop="person"
              label="会员姓名">
            </el-table-column>
            <el-table-column prop="orderTime"
              label="下单时间">
            </el-table-column>
            <el-table-column prop="hotelName"
              label="酒店名称">
            </el-table-column>
            <el-table-column prop="roomName"
              label="房型">
            </el-table-column>
            <el-table-column prop="money"
              label="订单总金额">
            </el-table-column>
            <el-table-column label="抽佣金额"
              prop="brokerage">
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item style="margin-top: 20px;">
          <el-pagination @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, prev , pager , next, sizes, jumper"
            :total="total">
          </el-pagination>
        </el-form-item>
      </el-form>
    </div>

    <el-dialog :visible.sync="dialogAddGameGroup"
      width="400px">
      <el-form label-width="60px">
        <div class="input-box">
          <el-form-item label="开始时间">
            <el-date-picker type="date"
              placeholder="选择日期"></el-date-picker>
          </el-form-item>
        </div>
        <div class="input-box">
          <el-form-item label="结束时间">
            <el-date-picker type="date"
              placeholder="选择日期"></el-date-picker>
          </el-form-item>
        </div>
        <div class="input-box">
          <el-form-item label="发布平台">
            <el-select placeholder="请选择发布平台">
              <el-option label="微信"
                value="shanghai"></el-option>
              <el-option label="App"
                value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="dialogAddGameGroup = false">取 消</el-button>
        <el-button type="primary"
          @click="dialogAddGameGroup = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getDistributionList } from "@/public/js/member";
export default {
  data() {
    return {
      visible: false,
      content: {
        firstTitle: "会员列表",
        type: "close"
      },
      total: 0,
      pageSize: 10,
      pageNum: 1,
      city: "",
      searchKey: "",
      startEndTime: [],
      startTime: "",
      endTime: "",
      hotelName:'',
      distributionList: [],
      dialogAddGameGroup: false
    };
  },
  created() {
    this._getDistributionList();
  },
  methods: {
    //获取分销列表
    _getDistributionList() {
      getDistributionList({
        pageNo: this.pageNum,
        pageSize: this.pageSize,
        userId: this.$route.query.id,
        startTime: this.startTime,
        endTime: this.endTime,
        search: this.searchKey,
        hotelName: this.hotelName
      }).then(res => {
        console.log(res);
        this.distributionList = res.data.distributionList;
        this.total = res.data.total;
      });
    },
    // 搜索
    searchMember() {
      this._getDistributionList();
    },
    //时间筛选
    startEndTimeChange(val) {
      if (val) {
        this.startTime = val[0];
        this.endTime = val[1];
      } else {
        this.startTime = "";
        this.endTime = "";
      }

      this._getDistributionList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this._getDistributionList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this._getDistributionList();
    }
  }
};
</script>
<style lang="scss" scoped>
.game {
  .game-content {
    background-color: white;
    padding: 20px;
    position: relative;
    .el-form {
      .el-form-item {
        .el-form-item__content {
          line-height: 34px !important;
          .el-dropdown {
            float: left;
            margin-right: 20px;
          }
          .el-input {
            float: left;
            width: 100%;
            input {
              height: 34px;
              line-height: 34px;
            }
          }
          .el-pagination {
            text-align: right;
            .el-pagination__jump {
              .el-input {
                float: none !important;
                width: 50px !important;
              }
            }
          }
          .el-table__header,
          .el-table__body {
            width: 100% !important;
          }
        }
      }
    }
    .game-state {
      text-align: left;
      .el-button {
        font-size: 12px;
        color: #6d2377;
        border: 1px solid #6d2377;
        padding: 0 20px;
        line-height: 32px;
      }
    }
    .searchGame {
      margin-left: 15px;
      padding: 9px 21px;
    }

    .label {
      float: left;
      font-size: 12px;
      line-height: 40px;
      margin-right: 8px;
    }
    .el-input__inner {
      line-height: 20px;
      height: 34px;
      margin-top: 3px;
    }
  }
  .input-box {
    .el-select,
    .el-date-editor {
      width: 80% !important;
    }
  }
  .el-range-editor.el-input__inner {
    padding-top: 0;
    width: 300px;
  }
}
</style>
